<template>
    <div id="MapList">
      <header class="header">
        <div class="title">
          <img src="../../assets/images/01_11.png" alt="" class="img_zuo" @click="back" />
          <div>{{title}}</div>
          <!--<span class="btn-add" @click="addNew">+</span>
          <img src="../../assets/images/big.png" alt="" class="btn-search" @click="search" />-->
        </div>
      </header>
      <div class="main">

        <!--<div class="lie_list_item" v-for="(obj,i) of list" @click="openXq(obj)">
          <div class="xh">{{i+1}}</div>
          <div class="name">{{jiequDz(obj.dz,9)}}</div>
          <div class="type">{{obj.yt}}</div>
          <div class="mj">{{obj.jzmj}}m²</div>
          <img src="../../assets/images/tel.png" alt="" class="dianhua" @click.stop="tel(obj)" />
        </div>-->
        <!--<van-pull-refresh v-model="refreshing" @refresh="onRefresh">-->
          <van-list v-model="loading" :finished="finished" @load="onLoad">
            <div class="lie_list_item" v-for="(obj,i) of list" @click="openXq(obj)">
              <div class="xh">{{i+1}}</div>
              <div class="name">{{jiequDz(obj.dz,8)}}</div>
              <div class="type">{{obj.yt}}</div>
              <div class="mj">{{obj.jzmj}}m²</div>
              <img src="../../assets/images/tel.png" alt="" class="dianhua" @click.stop="tel(obj)" />
            </div>
          </van-list>
        <!--</van-pull-refresh>-->

      </div>
      <Tabbar></Tabbar>
    </div>
</template>
<script>
import { Dialog } from 'vant';
import Tabbar from "../tabbar.vue";
export default {
    name: "mode_list",
    data(){
        return{
          list:[],
          xqda_params:null,
          title:'',
          name:'',
          loading: false,
          finished: false,
          refreshing: false,
          page:1,
          pageSize:50,
          load_over:false
        }
    },
    components: {
      Tabbar
    },
    methods:{
      onLoad() {
        var _this = this;
        if (_this.refreshing) {
          _this.list = [];
          _this.refreshing = false;
          _this.page = 1;
        }

        /*try{
          plus.nativeUI.showWaiting("正在加载...");
        }catch(e){
          console.log(e.message);
        }*/
        _this.xqda_params.cs_cx.page = _this.page;
        _this.xqda_params.cs_cx.pageSize = _this.pageSize;
        _this.axios.get(_this.$global_msg.Url.host + "/construction/selectZgfinfoByTypeAndDwId",{
        	params: _this.xqda_params.cs_cx
        }).then(function (data) {
          console.log('construction/selectZgfinfoByTypeAndDwId:',data);
          if(data&&data.data){
            if(data.data.code==0){
              for(var n=0;n<data.data.rows.length;n++){
                var dizhi = data.data.rows[n].Dizhi;
                data.data.rows[n].dz = dizhi;
              }
              _this.list = _this.list.concat(data.data.rows);
              if(_this.list.length>=data.data.total){
                _this.finished = true;
              }else{
                _this.page++;
              }
            }else{
              _this.$toast(data.data.msg);
            }
          }else{
            _this.$toast('查询失败');
          }
          _this.loading = false;
          _this.load_over = true;

          try{
            plus.nativeUI.closeWaiting();
          }catch(e){
            console.log(e.message);
          }
        }).catch(error => {
          _this.$terminal._error(error);
        });
      },
      onRefresh() {
        // 清空列表数据
        this.finished = false;

        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.onLoad();
      },
      jiequDz(dz,num){
        if(dz.length>num){
          dz = dz.substring(0,num);
        }
        return dz;
      },
      back(){
        //this.$router.push(this.xqda_params.path);
        this.$router.back()
      },
      //初始化
      init(){
        var _this = this;
        try{
          plus.nativeUI.showWaiting("正在加载...");
        }catch(e){
          console.log(e.message);
        }
        _this.axios.get(_this.$global_msg.Url.host + "/construction/selectZgfinfoByTypeAndDwId",{
        	params: _this.xqda_params.cs_cx
        }).then(function (data) {
          console.log('construction/selectZgfinfoByTypeAndDwId:',data);
          if(data&&data.data){
            if(data.data.code==0){
              for(var n=0;n<data.data.rows.length;n++){
                var dizhi = data.data.rows[n].Dizhi;
                data.data.rows[n].dz = dizhi;
              }
              _this.list = data.data.rows;
              _this.$nextTick(function(){
                var list_scrollTop = localStorage.getItem("list_scrollTop");
                if(list_scrollTop){
                  $('.main').animate({scrollTop: list_scrollTop}, 0);
                }
              })
            }else{
              _this.$toast(data.data.msg);
            }
          }else{
            _this.$toast('查询失败');
          }

          try{
            plus.nativeUI.closeWaiting();
          }catch(e){
            console.log(e.message);
          }
        }).catch(error => {
          _this.$terminal._error(error);
        });
      },
      openXq(obj){//打开详情查看
        console.log(obj);
        var _this = this;
        _this.xqda_params.xq_id = obj.id//详情id
        _this.xqda_params.from = '/bzt_list_zgf';//详情返回路径
        localStorage.setItem("xqda_params",JSON.stringify(_this.xqda_params));
        localStorage.setItem("list_scrollTop",$('.main').scrollTop());
        this.$router.push("/zgf_see");
      },
      tel(obj){
        var _this = this;
        var phone = obj.lxdh;
        if (phone.toString().length >= 1) {
          Dialog.confirm({
            title: '提示',
            message: '是否拨打 ' + phone + ' ？',
            confirmButtonText: "拨打", //改变确认按钮上显示的文字
            cancelButtonText: "取消" //改变取消按钮上显示的文字
          }).then(() => {
            //console.log("点击了确认按钮噢")
            plus.device.dial(phone, false);
          }).catch(() => {
            //console.log("点击了取消按钮噢")
          });
      	}
      },
      plusReady: function () {

      },
    },
    created(){
      this.title = localStorage.getItem('Title')
      this.name = localStorage.getItem('name')
    },
    beforeCreate() {
      document.addEventListener("plusready", this.plusReady, false);
    },
    beforeRouteLeave(to, from, next) {
        //设置路由的 meta
        if(to.path!='/zgf_see'){
          localStorage.removeItem('xqda_params');
          localStorage.removeItem("list_scrollTop");
          localStorage.removeItem("list_update");
        }
        Dialog.close();
        next();
    },
    //进入该页面时，用之前保存的滚动位置赋值
    beforeRouteEnter (to, from, next) {
        next(vm => {
          var list_update = localStorage.getItem("list_update")?JSON.parse(localStorage.getItem("list_update")):null;
          if(list_update){
            var list = vm.list;
            vm.list = [];
            for(var n=0;n<list.length;n++){
              if(list[n].id==list_update.id){
                list[n].dz = list_update.dizhi;
                list[n].yt = list_update.yt;
                list[n].jzmj = list_update.jzmj;
                list[n].lxdh = list_update.lxdh;
              }
            }
            vm.list = list;
            vm.$forceUpdate();
            vm.$nextTick(function(){
              var list_scrollTop = localStorage.getItem("list_scrollTop");
              if(list_scrollTop){
                $('.main').animate({scrollTop: list_scrollTop}, 0);
              }
            })
          }else{
            vm.title = localStorage.getItem('Title')
            vm.name = localStorage.getItem('name')
            vm.xqda_params = localStorage.getItem("xqda_params")?JSON.parse(localStorage.getItem("xqda_params")):{};
            if((!vm.xqda_params.title)&&vm.xqda_params.type){
              vm.title =  vm.title + vm.xqda_params.type+'档案' || vm.name + vm.xqda_params.type+'档案';
            }else if(vm.xqda_params.title&&vm.xqda_params.type){
              vm.title = vm.xqda_params.title+vm.xqda_params.type;
            }else{
              vm.title =  vm.title + '住改非档案';
            }
            if(vm.load_over){
              vm.list = [];
              vm.refreshing = false;
              vm.page = 1;
              vm.onRefresh();
            }
          }
        })
    },
    mounted() {
      var _this = this;
      this.xqda_params = localStorage.getItem("xqda_params")?JSON.parse(localStorage.getItem("xqda_params")):{};
      if((!this.xqda_params.title)&&this.xqda_params.type){
        this.title =  this.title + this.xqda_params.type+'档案' || this.name + this.xqda_params.type+'档案';
      }else if(this.xqda_params.title&&this.xqda_params.type){
        this.title = this.xqda_params.title+this.xqda_params.type;
      }else{
        this.title =  this.title + '住改非档案';
      }
      //this.init();

      //物理返回
      // window.addEventListener("popstate", function(){
      //   _this.back();
      // }, false);
    },
}
</script>
<style scoped>
  #MapList{
    width: 100%;
    height: 100%;
    z-index: 40;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
  }
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    width: 100%;
    font-size: 0.388888rem;
    position: relative;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }
  .btn-search{
    position: absolute;
    right: 1.388888rem;
    bottom: 0.388888rem;
    width: 0.629629rem;
    height: 0.629629rem;
  }
  .btn-add{
    position: absolute;
    right: 0.37037rem;
    font-size: 1.111111rem !important;
  }

  .main {
    /*padding-top: 1.8519rem;*/
    /* height: 100vh; */
    box-sizing: border-box;
    background: #fff;
    /*padding-bottom: 3.796314814814815rem; */
    /* padding-top: 10.0008px; */
    flex: 1;
    overflow: scroll;
    padding-bottom: 1.662963rem;
  }


  .lie_list_item {
  	height: 1.37037rem;
  	border-bottom: 0.018518518518518517rem solid #f1f1f1;
    display: flex;
    align-items: center;
  }

  .lie_list_item .xh{
  	width: 1rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .lie_list_item .name{
  	width: 4rem;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 0.388888rem;
    margin-left: 0.185185rem;
  }
  .lie_list_item .type{
  	width: 2rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 0.388888rem;
    margin-left: 0.185185rem;
  }
  .lie_list_item .mj{
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.388888rem;
  }
  .lie_list_item .dianhua{
  	width: 0.518518rem;
    height: 0.518518rem;
    margin-left: 0.2778rem;
    margin-right: 0.407407rem;
  }

  .head_right {
  	color: #fff;
  	position: absolute;
  	right: 0.3889rem;
  	top: 0.779rem;
  	height: 44px;
  	font-size: 0.4259rem;
  	line-height: 44px;
  }

  .lie_list_item_bg {
  	background: #2E5DFE;
  	color: #fff;
  }
</style>
